<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="slideshow"></div>
</body>
<style>
  *{
    margin:0;
    padding:0;
  }
</style>
<script>
  (function(_window,_document){

    let unit = 'px';//设置css单位

    let Carousel = function(data,ele,
      config = {
        width:500,
        height:300,
        olBottom:10,
        autoPlay:true,
        autoPlayTime:1500,
        speed:10
      }){

      if(Object.prototype.toString.call(data) !== '[object Array]'){
        throw new Error('请填入数据数组')
      }

      if(data == undefined){
        throw new Error('没有填写数据')
        reutrn;
      }

      if(ele == undefined){
        throw new Error('没有填写根节点')
        reutrn;
      }

      this._config = config;
      this._data = data;
      this._index = 0;
      this._status = false;

      this._autoPlay = function(){
        this._autoTime = setInterval(this._movePlay,this._config.autoPlayTime);
      }

      this._stopPlay = function(){
        clearInterval(this._autoTime);
      }

      this._movePlay = function(offsetWidth){
        // let left = this._ul.style.left.replace(/px/,'');
        this._status = true;

        let _this = this;
        this._ul.style.transition = 'left .5s ease';
        if(offsetWidth == undefined){
          offsetWidth = -500;
        }

        let left = parseInt(this._ul.style.left);
        // console.log(left)

        if(offsetWidth > 0){
          if(this._index == 0){
            this._index = this._data.length-1;
          }else{
            this._index -= 1;
          }

          if(left == -this._config.width){
            
            (function(){
              setTimeout(function(){
                _this._ul.style.transition = '';
                _this._ul.style.left = -this._config.width*this._data.length+unit;
                this._status = false;
                // _this._ul.style.width = _this._config.width*_this._ul.children.length+unit;
              },500);
            })()
          }
        }else{
          if(this._index == this._data.length-1){
            this._index = 0;
          }else{
            this._index += 1;
          }
          if(left == -this._config.width*this._data.length){
            (function(){
              setTimeout(function(){
              _this._ul.style.transition = '';
              // console.log(_this._config.width*_this._ul.children.length)
              _this._ul.style.left = -this._config.width+unit;
              this._status = false;
              // _this._ul.style.width = _this._config.width*_this._ul.children.length+unit;
            },500);
            })()
          }
        }

        left += offsetWidth;
        
        for(let i=0;i<this._data.length;i++){
          this._ol.children[i].style.backgroundColor = '#A9A9A9'
        }
        
        this._ul.style.left = left+unit;
        
        this._ol.children[this._index].style.backgroundColor = 'white'
        setTimeout(function(){
          this._status = false;
        },500);
      }

      

      let slideshow = _document.getElementById('slideshow')//获取根节点
      //设置根节点样式
      slideshow.style.width = this._config.width+unit;
      slideshow.style.height = this._config.height+unit;
      slideshow.style.overflow = 'hidden';
      slideshow.style.position = 'relative';
      slideshow.style.marginLeft = '500px';

      this._slideshow = slideshow;

      let ul = _document.createElement('ul');

      //设置ul样式
      ul.style.listStyleType = 'none';
      ul.style.width = this._config.width*(this._data.length+2)+unit;
      ul.style.height = this._config.height+unit;
      ul.style.position = 'absolute';
      ul.style.left = -this._config.width+unit;
      ul.style.transition = 'left .5s ease'

      this._ul = ul;


      //设置索引点
      let ol = _document.createElement('ol');
      
      ol.style.listStyleType = 'none';
      ol.style.backgroundColor = 'rgba(211,211,211,0.6)';
      ol.style.width = 10*(this._data.length*2+1)+unit;
      ol.style.height = 20*this._config.height/300+unit;
      ol.style.position = 'absolute';
      ol.style.left = (this._config.width-10*(this._data.length*2+1))/2+unit;
      ol.style.top = this._config.height-20*this._config.height/300-this._config.olBottom+unit;
      ol.style.borderRadius = 6+unit;

      this._ol = ol;
      

      let uli = [];
      let oli = [];
      for(var i=0;i<data.length;i++){
        uli[i] = _document.createElement('li');
        //设置li样式
        uli[i].style.width = this._config.width+unit;
        uli[i].style.height = this._config.height+unit;
        uli[i].style.float = 'left';
        uli[i].innerHTML = '<img src="'+data[i].imgUrl+'">';

        oli[i] = _document.createElement('li');
        oli[i].style.width = 10+unit;
        oli[i].style.height = 10+unit;
        oli[i].style.float = 'left';
        oli[i].style.borderRadius = 10+unit;
        oli[i].style.marginLeft = 10+unit;
        oli[i].style.marginTop = 5+unit;
        oli[i].style.backgroundColor = '#A9A9A9';//'white';
        oli[i].style.opacity = '1';//'white';
        

        ul.appendChild(uli[i]);
        ol.appendChild(oli[i]);
        this._ol.children[this._index].style.backgroundColor = 'white'
      }
      

      //右边按钮
      let nextBtn = _document.createElement('div');
      nextBtn.style.position = 'absolute';
      nextBtn.style.width = 40+unit;
      nextBtn.style.height = 60+unit;
      nextBtn.style.top = 120+unit;
      nextBtn.style.left = 450+unit;
      nextBtn.style.backgroundColor = 'white';
      nextBtn.style.opacity = 0;
      nextBtn.style.transition = 'opacity .5s linear';
      
      let nextBtnArrow = _document.createElement('div');

      nextBtnArrow.style.position = 'absolute';
      nextBtnArrow.style.width = 20+unit;
      nextBtnArrow.style.height = 20+unit;
      nextBtnArrow.style.left = 5+unit;
      nextBtnArrow.style.top = 20+unit;
      nextBtnArrow.style.borderTop = '1px solid black';
      nextBtnArrow.style.borderRight = '1px solid black';
      nextBtnArrow.style.transform = 'rotate(45deg)';
      nextBtnArrow.style.webkitTransform = 'rotate(45deg)';



      //左边按钮
      let lastBtn = _document.createElement('div');
      lastBtn.style.position = 'absolute';
      lastBtn.style.width = 40+unit;
      lastBtn.style.height = 60+unit;
      lastBtn.style.top = 120+unit;
      lastBtn.style.left = 10+unit;
      lastBtn.style.backgroundColor = 'white';
      lastBtn.style.opacity = 0;
      lastBtn.style.transition = 'opacity .5s linear';
      
      let lastBtnArrow = _document.createElement('div');

      lastBtnArrow.style.position = 'absolute';
      lastBtnArrow.style.width = 20+unit;
      lastBtnArrow.style.height = 20+unit;
      lastBtnArrow.style.left = 15+unit;
      lastBtnArrow.style.top = 20+unit;
      lastBtnArrow.style.borderTop = '1px solid black';
      lastBtnArrow.style.borderRight = '1px solid black';
      lastBtnArrow.style.transform = 'rotate(-135deg)';
      lastBtnArrow.style.webkitTransform = 'rotate(-135deg)';

      nextBtn.appendChild(nextBtnArrow)
      lastBtn.appendChild(lastBtnArrow)

      // function hoverOver(){
      //   this.style.opacity = '0.8';
      // }

      // function hoverOut(){
      //   this.style.opacity = '0';
      // }

      // nextBtn.onmouseover = hoverOver
      // nextBtn.onmouseout = hoverOut
      // lastBtn.onmouseover = hoverOver
      // lastBtn.onmouseout = hoverOut

      //添加前后图片
      this._init = function(){
        let extra_uli = [];
        for(var i=0;i<2;i++){
          extra_uli[i] = _document.createElement('li');
          //设置li样式
          extra_uli[i].style.width = this._config.width+unit;
          extra_uli[i].style.height = this._config.height+unit;
          extra_uli[i].style.float = 'left';
          extra_uli[i].innerHTML = '<img src="'+(i==0?data[i].imgUrl:data[this._data.length-1].imgUrl)+'">';
          // console.log(extra_uli[0]);
        }
        // console.log(uli[0])
        this._ul.appendChild(extra_uli[0]);
        this._ul.insertBefore(extra_uli[1],this._ul.children[0]);
      }

      this._init();
      
      slideshow.appendChild(ul);
      slideshow.appendChild(ol);
      slideshow.appendChild(nextBtn);
      slideshow.appendChild(lastBtn);



      let _this = this;

      slideshow.onmouseout = function(){
        nextBtn.style.opacity = '0'
        lastBtn.style.opacity = '0'
        if(_this._config.autoPlay){
          _this._autoPlay()
        }
        
      }

      slideshow.onmouseover = function(){
        nextBtn.style.opacity = '0.8'
        lastBtn.style.opacity = '0.8'
        if(_this._config.autoPlay){
          _this._stopPlay()
        }
      }

      this._nextPlay = function(){
        if(this._status){
          return;
        }
        this._movePlay(-500);
      }

      this._lastPlay = function(){
        if(this._status){
          return;
        }
        this._movePlay(500);
      }

      nextBtn.onclick = function(){
        _this._nextPlay();
      }

      lastBtn.onclick = function(){
        _this._lastPlay();
      }

      if(this._config.autoPlay){
        this._autoPlay()
      }

    }

    _window.Carousel = Carousel;
  })(window,document)

  Carousel([{imgUrl:'1.jpg'},{imgUrl:'2.jpg'},{imgUrl:'3.jpg'},{imgUrl:'4.jpg'}],'slideshow')

</script>
</html>